<template>
    <div class="alert alert-flash"
         :class="'alert-'+ level"
         role="alert"
         v-show="show"
         v-text="body">
    </div>
</template>

<script>
  export default {
    props: ['message'],
    data() {
      return {
        body: this.message,
        level: 'success',
        show: false
      }
    },
    created() {
      if (this.message) {
        this.flash();
      }
      window.events.$on('flash', data => this.flash(data));
    },
    methods: {
      flash(data) {
        if (data) {
          this.body = data.message;
          this.level = data.level;
        }
        this.show = true;
        this.hide();
      },
      hide() {
        setTimeout(() => {
          this.show = false;
        }, 3000)
      }
    }
  };
</script>

<style>
    .alert-flash {
        position: fixed;
        right: 25px;
        bottom: 25px;
    }
</style>
